<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <title>Collapser</title>

  <link href="css/screen.css" type="text/css" rel="stylesheet" media="screen,projection" />
  <!--[if IE 8]>
  <link rel="stylesheet" type="text/css" href="css/screen-ie8.css" media="screen,projection" />
  <![endif]-->
  <!--[if lte IE 7]>
  <link rel="stylesheet" type="text/css" href="css/screen-ie7.css" media="screen,projection" />
  <![endif]-->
  <!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="css/screen-ie6.css" media="screen,projection" />
  <![endif]-->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <!--script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script-->
  <script src="js/jquery.collapser.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/core.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
    .collapser {
      background: red;
    }
    .topen {
      background: yellow;
    }
  </style>
</head>
<body>

<div id="page">
  
  <h1 class="trigger">Toggle</h1>
  <div class="collapser" id="id3">
    <p>Lorem ipsum dolor sit amet consectetuer orci Sed Aenean venenatis tempor. Et Donec consequat pretium vitae ligula Sed tempor nascetur et vitae. Eros eros Donec tempor at molestie augue netus orci Donec et. Enim orci pretium tellus Vivamus In ultrices orci enim condimentum enim. Justo elit Curabitur id ac vel Vestibulum suscipit orci natoque sapien. Nulla consectetuer Aliquam.</p>
    <p>Lorem ipsum dolor sit amet consectetuer orci Sed Aenean venenatis tempor. Et Donec consequat pretium vitae ligula Sed tempor nascetur et vitae. Eros eros Donec tempor at molestie augue netus orci Donec et. Enim orci pretium tellus Vivamus In ultrices orci enim condimentum enim. Justo elit Curabitur id ac vel Vestibulum suscipit orci natoque sapien. Nulla consectetuer Aliquam.</p>
  </div>
  
  <h2 class="trigger">Toggle</h2>
  <p>Lorem ipsum dolor sit amet consectetuer orci Sed Aenean venenatis tempor. Et Donec consequat pretium vitae ligula Sed tempor nascetur et vitae. Eros eros Donec tempor at molestie augue netus orci Donec et. Enim orci pretium tellus Vivamus In ultrices orci enim condimentum enim. Justo elit Curabitur id ac vel Vestibulum suscipit orci natoque sapien. Nulla consectetuer Aliquam.</p>
  <p class="collapser">Lorem ipsum dolor sit amet consectetuer orci Sed Aenean venenatis tempor. Et Donec consequat pretium vitae ligula Sed tempor nascetur et vitae. Eros eros Donec tempor at molestie augue netus orci Donec et. Enim orci pretium tellus Vivamus In ultrices orci enim condimentum enim. Justo elit Curabitur id ac vel Vestibulum suscipit orci natoque sapien. Nulla consectetuer Aliquam.</p>
  
  <h3 class="trigger">Toggle</h3>
  <div class="collapser">
    <p>Lorem ipsum dolor sit amet consectetuer orci Sed Aenean venenatis tempor. Et Donec consequat pretium vitae ligula Sed tempor nascetur et vitae. Eros eros Donec tempor at molestie augue netus orci Donec et. Enim orci pretium tellus Vivamus In ultrices orci enim condimentum enim. Justo elit Curabitur id ac vel Vestibulum suscipit orci natoque sapien. Nulla consectetuer Aliquam.</p>
    <p>Lorem ipsum dolor sit amet consectetuer orci Sed Aenean venenatis tempor. Et Donec consequat pretium vitae ligula Sed tempor nascetur et vitae. Eros eros Donec tempor at molestie augue netus orci Donec et. Enim orci pretium tellus Vivamus In ultrices orci enim condimentum enim. Justo elit Curabitur id ac vel Vestibulum suscipit orci natoque sapien. Nulla consectetuer Aliquam.</p>
  </div>
  
  <p>
    <a href="#id3">toggle h3</a>
  </p>

  <h4>Generated triiger</h4>
  <div class="g-collapser">
    <p>Lorem ipsum dolor sit amet consectetuer orci Sed Aenean venenatis tempor. Et Donec consequat pretium vitae ligula Sed tempor nascetur et vitae. Eros eros Donec tempor at molestie augue netus orci Donec et. Enim orci pretium tellus Vivamus In ultrices orci enim condimentum enim. Justo elit Curabitur id ac vel Vestibulum suscipit orci natoque sapien. Nulla consectetuer Aliquam.</p>
    <p>Lorem ipsum dolor sit amet consectetuer orci Sed Aenean venenatis tempor. Et Donec consequat pretium vitae ligula Sed tempor nascetur et vitae. Eros eros Donec tempor at molestie augue netus orci Donec et. Enim orci pretium tellus Vivamus In ultrices orci enim condimentum enim. Justo elit Curabitur id ac vel Vestibulum suscipit orci natoque sapien. Nulla consectetuer Aliquam.</p>
  </div>
  
  <h2>Auto close</h2>
  <h3>trigger1</h3>
  <p class="autoclose">Lorem ipsum dolor sit amet consectetuer orci Sed Aenean venenatis tempor. Et Donec consequat pretium vitae ligula Sed tempor nascetur et vitae. Eros eros Donec tempor at molestie augue netus orci Donec et. Enim orci pretium tellus Vivamus In ultrices orci enim condimentum enim. Justo elit Curabitur id ac vel Vestibulum suscipit orci natoque sapien. Nulla consectetuer Aliquam.</p>
  <h3>trigger2</h3>
  <p class="autoclose">Lorem ipsum dolor sit amet consectetuer orci Sed Aenean venenatis tempor. Et Donec consequat pretium vitae ligula Sed tempor nascetur et vitae. Eros eros Donec tempor at molestie augue netus orci Donec et. Enim orci pretium tellus Vivamus In ultrices orci enim condimentum enim. Justo elit Curabitur id ac vel Vestibulum suscipit orci natoque sapien. Nulla consectetuer Aliquam.</p>
  
</div>

</body>
</html>
